<template>
  <div class=" padlr320 pad-t20">
    <div class="table-wrap pad20 min-w1280">
      <div class="table-tit pad-b20">购物车({{ selectChecked }})</div>
        <div class="table-box">
            <div class="table-header flex-a ju-ar pad-l20">
                <div 
                    class="table-tr"
                    v-for="(item, index) in tableTr"
                    :key="index"
                    :style="{'width': item.width ? item.width : 'auto'}"
                >
                    <div class="flex-a" v-if="!index">
                        <el-checkbox 
                            v-model="checkedAll" 
                            size="large" 
                            @change="checkedAllChange" 
                        />
                        <div class="mar-l10">已选（{{ selectCheckedLength }}）</div>
                    </div>
                    <div v-else>{{ item.name }}</div>
                </div>
            </div>
            <el-divider />
            <div 
                class="div"
                v-for="(item, index) in list"
                :key="index"
            >
                <div class="table-td  padlr20">
                    <div class="td-tit flex-a">
                        <el-checkbox 
                            v-model="item.checked" 
                            size="large" 
                            @change="checkedChange(item)"
                        />
                        <div class="mar-l10">{{ item.tit }}</div>
                    </div>
                </div>
                <el-divider />
                <el-checkbox-group 
                    v-model="item.checkList"
                    @change="checkboxGroupChange(item)"
                >
                    <el-table
                        :data="item.child"
                        style="width: 100%"
                        :show-header="false"
                        :highlight-current-row="false"
                    >
                        <el-table-column label="多选" type="selection" width="35" >
                            <template #default="{ row }">
                                <div class="pad-l10">
                                    <el-checkbox 
                                        label="" 
                                        :value="row.id" 
                                    />
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column  >
                            <el-table-column label="图片" prop="image"  width="190px">
                                <template #default="{ row }">
                                    <div class="flex-a pad-l8">
                                        <el-image
                                            style="width: 148px; height: 98px"
                                            :src="getAssetsImages(row.image)"
                                        />
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="商品名称" prop="name" width="200">
                                <template #default="{ row }">
                                    <div class="info-box ">
                                        {{ row.name }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="配置信息" prop="configuration" width="140px">
                                <template #default="{ row }">
                                    <div 
                                        v-for="(rowItem, rowIndex) in row.configuration"
                                        :key="rowIndex"
                                    >
                                        {{ rowItem }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="付费类型" prop="paymentType" width="100">
                                <template #default="{ row }">
                                    <div>{{ row.paymentType }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="购买时长" prop="duration" width="160">
                                <template #default="{ row }" >
                                    <div>
                                        <el-select
                                            v-model="row.duration"
                                            placeholder="请选择"
                                            style="width: 120px"
                                        >
                                            <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            />
                                        </el-select>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="购买数量" prop="number" width="160">
                                <template #default="{ row }">
                                    <div>
                                        <el-input-number 
                                            v-model="row.number" 
                                            :min="1" 
                                            :max="30" 
                                            @change="handleChange"
                                            class="w-110"
                                        />
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="价格" prop="price" >
                                <template #default="{ row }">
                                    <div class="price-txt">{{ row.price }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="130">
                                <template #default="{ row }">
                                    <div>
                                        <el-space wrap>
                                            <el-text 
                                                size="small" 
                                                type="primary"
                                                @click="onDel(row)"
                                            >
                                                删除
                                            </el-text>
                                            <el-text size="small" type="primary">
                                                变更配置
                                            </el-text>
                                        </el-space>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </el-checkbox-group>
            </div>

        </div>
    </div>
    <div class="fot-buy padtb30 padlr20 flex-a ju-bt mar-t20 min-w1280">
      <div class="buy-price flex-a">
        <div class="check-txt flex-a mar-r20">
            <el-checkbox 
                v-model="checkedAll" 
                size="large"
                @change="checkedAllChange"
            />
            <div class="mar-l10">已选（{{ selectCheckedLength }}）</div>
        </div>
        <div class="price-num mar-r30">总金额小计 ¥3,000.00</div>
        <div class="price-coupon">已优惠 ￥500.00</div>
      </div>
      <div class="buy-btn flex-a">
        <div class="btn-price">
          <span class="price-label mar-r10">应付金额</span>
          <span class="price-amount">
            <span class="payment-unit">¥</span>
            <span class="payment-amount">2500.00</span>
          </span>
        </div>
        <div class="btn-btns flex">
          <div class="mar-l20 btn btn2" @click="submitForm()">
            立即购买
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 购物车
 */
import { ref } from "vue";
const router = useRouter();
const toPath = url => {
    if(!url) return
    router.push(url);
};
let checkedAll = ref(false)
const checkedAllChange = eve => { 
    if (eve) {
        list.value.forEach(item => {
            item.checkList = [];
            item.child.forEach(childItem => {
                item.checkList.push(childItem.id)
            })
            checkboxGroupChange(item)

        })
    } else { 
        list.value.forEach(item => {
            item.checkList = [];
            checkboxGroupChange(item)
        })
    }
}
let tableTr = ref([
    {
        name: "已选",
        width: "220px"
    },
    {
        name: "商品名称",
        width: "180px"
    },
    {
        name: "配置信息",
        width: "110px"
    },
    {
        name: "付费类型",
        width: "110px"

    },
    {
        name: "购买时长",
        width: "130px"
    },
    {
        name: "购买数量",
        width: "150px"
    },
    {
        name: "价格",
        width: "100px"

    },
    {
        name: "操作",
        width: "130px"
    },
])
let list = ref([
    {
        tit: "计算机软件著作权登记服务",
        checkList: [],
        checked: false,
        child: [
            {
                id: 1,
                image: "work-card4",
                name: "计算机软件著作权登记服务 (纸质登记)",
                configuration: ['软著产品分类', '软著产品分类'],
                paymentType: "包年包月",
                duration: 1,
                number: "1",
                price: "¥2,500.00",
            },
            {
                id: 2,
                image: "work-card4",
                name: "国内商标注册",
                configuration: ['软著产品分类', '软著产品分类'],
                paymentType: "包年包月",
                duration: 1,
                number: "1",
                price: "¥2,500.00",
            },
        ],
    },
    {
        tit: "商标答辩",
        checked: false,
        checkList: [],
        child: [
            {
                id: 3,
                image: "work-card4",
                name: "国内商标注册",
                configuration: ['软著产品分类', '软著产品分类'],
                paymentType: "包年包月",
                duration: 1,
                number: "1",
                price: "¥2,500.00",
            }
        ],
    },
])
// 购买数量change
const handleChange = eve => { 
    console.log(eve, "---input-number ");
}

const options = [
  {
    value: 1,
    label: '一年',
  },
  {
    value: 2,
    label: '两年',
    },
]
const checkedChange = (eve) => {
    if (!eve.checked) {
        eve.checkList = [];
    } else { 
        eve.child.forEach(item => { 
            if (!eve.checkList.includes(item.id)) { 
                eve.checkList.push(item.id)
            }
        })
    }
    changeSelectCheckedLength();
}
const checkboxGroupChange = eve => { 
    if (eve.checkList.length >= eve.child.length) {
        eve.checked = true
    } else { 
        eve.checked = false;
    }
    changeSelectCheckedLength();
}
let changeSelectCheckedLength = () => {
    let num = 0;
    let checkedArr = [];
    list.value.forEach(item => { 
        num += item.checkList.length
        // checkedArr.push(item.checked)
        checkedArr.push(item.checked)
    })
    // if (!checkedArr.includes(false)) {
    //     checkedAll.value = true;
    // }
    // console.log(checkedArr, "--checkedArr");
    selectCheckedLength.value = num;
    checkedAll.value = Boolean(selectCheckedLength.value)

}
// check 已选数量
let selectCheckedLength = ref(0)
const submitForm = () => {
  toPath("/orderSuccessful")
}
const onDel = eve => { 
    console.log(eve, "--del");
}
let selectChecked = ref(0)
list.value.forEach(item => { 
    selectChecked.value += item.child.length
})
const getAssetsImages = (name) => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.check-txt {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #202020;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: transparent;
}
.price-txt {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #ff4600;
}
.el-divider {
    margin: 0;
}
.fot-buy {
  background: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 4px;
  .buy-btn  {
    .btn-btns {
      .btn {
        width: 140px;
        height: 40px;
        border-radius: 2px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        font-family: PingFang TC, PingFang TC-Regular;
        font-weight: Regular;
        text-align: center;
      }
      .btn1 {
        border: 1px solid #0052d9;
        color: #0052d9;

      }
      .btn2 {
        background: #0052d9;
        color: #ffffff;
      }
    }
    .btn-price {
      .price-label {
        font-size: 16px;
        font-weight: Regular;
        text-align: left;
        color: #202020;
      }
      .price-amount {
        font-size: 28px;
        font-weight: Semibold;
        text-align: left;
        color: #ff4600;
        .payment-unit {
          font-size: 16px;
        }
      }
    }
  }
  .buy-price {
    .price-num {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #202020;
    }
    .price-coupon {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #ff4600;
    }
  }
}

.table-wrap {
  // width: 1280px;
  background: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 4px;
//   border: 1px solid #d6dce0;
    .table-box {
        border: 1px solid #d6dce0;

    }
  .table-tit {
    font-size: 20px;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: Semibold;
    text-align: left;
    color: #202020;
  }

  .table-header {
    height: 62px;
    background: #f4f6fa;
    border-radius: 4px;
    .table-tr {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #202020;
    }
    
  }
  .table-td {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #202020;
    }
}
</style>
